<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>HTML 第 01 天 | 前端基础班学习笔记</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="前端基础班笔记">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/basenode/assets/css/0.styles.2182318c.css" as="style"><link rel="preload" href="/basenode/assets/js/app.52c57e5d.js" as="script"><link rel="preload" href="/basenode/assets/js/2.fd1002bd.js" as="script"><link rel="preload" href="/basenode/assets/js/7.6ab91996.js" as="script"><link rel="prefetch" href="/basenode/assets/js/10.0fd16134.js"><link rel="prefetch" href="/basenode/assets/js/11.69b32ff0.js"><link rel="prefetch" href="/basenode/assets/js/12.8306a2fe.js"><link rel="prefetch" href="/basenode/assets/js/13.bd409108.js"><link rel="prefetch" href="/basenode/assets/js/14.397fbca0.js"><link rel="prefetch" href="/basenode/assets/js/15.3ebf464d.js"><link rel="prefetch" href="/basenode/assets/js/16.18b0f270.js"><link rel="prefetch" href="/basenode/assets/js/17.aca32580.js"><link rel="prefetch" href="/basenode/assets/js/18.b36abbab.js"><link rel="prefetch" href="/basenode/assets/js/19.40fd0225.js"><link rel="prefetch" href="/basenode/assets/js/20.9c6d2a17.js"><link rel="prefetch" href="/basenode/assets/js/21.6d37b375.js"><link rel="prefetch" href="/basenode/assets/js/22.c01d802c.js"><link rel="prefetch" href="/basenode/assets/js/23.d7de44fa.js"><link rel="prefetch" href="/basenode/assets/js/24.3470c223.js"><link rel="prefetch" href="/basenode/assets/js/3.924754cc.js"><link rel="prefetch" href="/basenode/assets/js/4.4eeb3907.js"><link rel="prefetch" href="/basenode/assets/js/5.88e4a4fd.js"><link rel="prefetch" href="/basenode/assets/js/6.ae7868e8.js"><link rel="prefetch" href="/basenode/assets/js/8.750a9450.js"><link rel="prefetch" href="/basenode/assets/js/9.26864b79.js">
    <link rel="stylesheet" href="/basenode/assets/css/0.styles.2182318c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/basenode/" class="home-link router-link-active"><!----> <span class="site-name">前端基础班学习笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/basenode/html/" class="nav-link router-link-active">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link">
  CSS
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/basenode/html/" class="nav-link router-link-active">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link">
  CSS
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>HTML</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/basenode/html/" aria-current="page" class="sidebar-link">HTML 学习</a></li><li><a href="/basenode/html/day01.html" aria-current="page" class="active sidebar-link">HTML 第 01 天</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_1-基础认知-第-1-节课" class="sidebar-link">1. 基础认知（第 1 节课）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_1-1-「知道」基础班学习路线-03-54" class="sidebar-link">1.1 「知道」基础班学习路线（03'54''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_1-2-「知道」html-简介导读-00-38" class="sidebar-link">1.2 「知道」HTML 简介导读（00'38''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_1-3-「知道」网页的相关概念-07-38" class="sidebar-link">1.3 「知道」网页的相关概念（07'38'')</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_1-4-「知道」常用浏览器以及内核-04-43" class="sidebar-link">1.4 「知道」常用浏览器以及内核（04'43'')</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_1-5-「知道」web-标准-07-32" class="sidebar-link">1.5 「知道」Web 标准（07'32'')</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_2-「重点」html-骨架-第-2-节课" class="sidebar-link">2. 「重点」HTML 骨架（第 2 节课）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_2-1-「知道」html-标签导读-01-05" class="sidebar-link">2.1 「知道」HTML 标签导读（01'05''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_2-2-「重点」html-语法规范-07-10" class="sidebar-link">2.2 「重点」HTML 语法规范（07'10''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_2-3-「重点」html-基本结构标签-07-10" class="sidebar-link">2.3 「重点」HTML 基本结构标签（07'10''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_2-4-「重点」vscode-工具创建页面-06-35" class="sidebar-link">2.4 「重点」VSCode 工具创建页面（06'35''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_2-5-「知道」doctype-和-lang-以及字符集的作用-08-58" class="sidebar-link">2.5 「知道」DOCTYPE 和 lang 以及字符集的作用（08'58''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_3-「重点」html-常用标签-第-3-节课" class="sidebar-link">3. 「重点」HTML 常用标签（第 3 节课）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_3-1-「知道」标签语义-02-21" class="sidebar-link">3.1 「知道」标签语义（02'21''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_3-2-「应用」标题标签-05-14" class="sidebar-link">3.2 「应用」标题标签（05'14''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_3-3-「应用」段落标签和换行标签-06-23" class="sidebar-link">3.3 「应用」段落标签和换行标签（06'23''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_3-4-「应用」体育新闻案例-04-26" class="sidebar-link">3.4 「应用」体育新闻案例（04'26''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_3-5-「应用」文本格式化标签-07-43" class="sidebar-link">3.5 「应用」文本格式化标签（07'43''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_4-「重点」html-常用标签-第-4-节课" class="sidebar-link">4. 「重点」HTML 常用标签（第 4 节课）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_4-1-「应用」div-和-span-标签-04-43" class="sidebar-link">4.1 「应用」div 和 span 标签（04'43''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_4-2-「应用」图像标签-上-09-12" class="sidebar-link">4.2 「应用」图像标签(上)（09'12''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_4-3-「应用」图像标签-下-04-14" class="sidebar-link">4.3 「应用」图像标签(下)（04'14''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_4-4-「应用」图像标签注意点-02-42" class="sidebar-link">4.4 「应用」图像标签注意点（02'42''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_5-「重点」html-常用标签-第-5-节课" class="sidebar-link">5. 「重点」HTML 常用标签（第 5 节课）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_5-1-「知道」目录文件夹和根目录-06-33" class="sidebar-link">5.1 「知道」目录文件夹和根目录（06'33''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_5-2-「应用」相对路径-上-06-10" class="sidebar-link">5.2 「应用」相对路径(上)（06'10''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_5-3-「应用」相对路径-下-02-56" class="sidebar-link">5.3 「应用」相对路径(下)（02'56''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_5-4-「应用」绝对路径-03-20" class="sidebar-link">5.4 「应用」绝对路径（03'20''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_5-5-「应用」链接标签-上-08-38" class="sidebar-link">5.5 「应用」链接标签(上)（08'38''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_5-6-「应用」链接标签-下-09-15" class="sidebar-link">5.6 「应用」链接标签(下)（09'15''）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_6-「重点」其他标签和综合案例-第-6-节课" class="sidebar-link">6. 「重点」其他标签和综合案例（第 6 节课）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_6-1-「应用」锚点链接-07-07" class="sidebar-link">6.1 「应用」锚点链接（07'07''）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_6-2-「知道」注释标签和特殊字符-08-18" class="sidebar-link">6.2 「知道」注释标签和特殊字符（08'18'）</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_6-3-「应用」综合案例-10-36-5-13" class="sidebar-link">6.3 「应用」综合案例（10'36' ~ 5'13）</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_7-附录" class="sidebar-link">7. 附录</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_7-1-标签" class="sidebar-link">7.1 标签</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_7-2-快捷键" class="sidebar-link">7.2 快捷键</a></li><li class="sidebar-sub-header"><a href="/basenode/html/day01.html#_7-3-单词表" class="sidebar-link">7.3 单词表</a></li></ul></li></ul></li><li><a href="/basenode/html/day02.html" class="sidebar-link">HTML 第 02 天</a></li><li><a href="/basenode/html/html-note.html" class="sidebar-link">HTML 笔记</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="html-第-01-天"><a href="#html-第-01-天" class="header-anchor">#</a> HTML 第 01 天</h1> <h2 id="_1-基础认知-第-1-节课"><a href="#_1-基础认知-第-1-节课" class="header-anchor">#</a> 1. 基础认知（第 1 节课）</h2> <h3 id="_1-1-「知道」基础班学习路线-03-54"><a href="#_1-1-「知道」基础班学习路线-03-54" class="header-anchor">#</a> 1.1 「知道」基础班学习路线（03'54''）</h3> <h4 id="_1-1-1-「基础班学习路线」内容"><a href="#_1-1-1-「基础班学习路线」内容" class="header-anchor">#</a> 1.1.1 「基础班学习路线」内容</h4> <ol><li>演示最终网站「品优购」页面效果</li> <li>介绍基础班学习路线</li></ol> <h4 id="_1-1-2-「基础班学习路线」重点"><a href="#_1-1-2-「基础班学习路线」重点" class="header-anchor">#</a> 1.1.2 「基础班学习路线」重点</h4> <ol><li><p>学到啥？</p> <ol><li>精通<strong>网页布局的能力</strong>，是前端工程师的必备技能。</li></ol></li> <li><p>怎么学？</p> <ol><li><strong>HTML 基础</strong>：常用标签</li> <li><strong>CSS3 基础</strong>：完成传统 PC 端网页布局</li> <li><strong>H5C3 提高</strong>：HTML 5 新增标签 + CSS3 新增样式</li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>品优购电商网站项目移动到就业班，给大家更多的时间复习和巩固。</p> <p>因此，升级考试之后，大家务必要好好复习基础班的知识点及综合案例的运用。</p></div></li></ol> <h3 id="_1-2-「知道」html-简介导读-00-38"><a href="#_1-2-「知道」html-简介导读-00-38" class="header-anchor">#</a> 1.2 「知道」HTML 简介导读（00'38''）</h3> <blockquote><p>过渡视频，介绍「基础认知」的三个重点内容</p></blockquote> <ol><li>网页</li> <li>常用浏览器</li> <li>Web 标准</li></ol> <h3 id="_1-3-「知道」网页的相关概念-07-38"><a href="#_1-3-「知道」网页的相关概念-07-38" class="header-anchor">#</a> 1.3 「知道」网页的相关概念（07'38'')</h3> <h4 id="_1-3-1-「网页的相关概念」内容"><a href="#_1-3-1-「网页的相关概念」内容" class="header-anchor">#</a> 1.3.1 「网页的相关概念」内容</h4> <ol><li>什么是网页？</li> <li>什么是 HTML？</li> <li>网页的形成？</li></ol> <h4 id="_1-3-2-网页的相关概念"><a href="#_1-3-2-网页的相关概念" class="header-anchor">#</a> 1.3.2 网页的相关概念</h4> <ol><li><p><strong>网站</strong>：提供<strong>特定服务</strong>的一组<strong>网页集合</strong>，例如<a href="%5Bhttps%5D(https://www.baidu.com/)">百度</a>、<a href="https://www.taobao.com/" target="_blank" rel="noopener noreferrer">淘宝<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://www.jd.com/" target="_blank" rel="noopener noreferrer">京东<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="http://www.itheima.com/" target="_blank" rel="noopener noreferrer">黑马程序员<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>等；</p></li> <li><p><strong>网页</strong>：网站中的一“页”，可以用<strong>浏览器</strong>查看</p> <ol><li>通常由<strong>文字</strong>、<strong>图片</strong>、<strong>链接</strong>、<strong>音频</strong>、<strong>视频</strong>等元素组成；</li> <li>网页又称为 HTML 文件，常以 <code>.html</code> 或 <code>.htm</code> 为扩展名。</li></ol></li> <li><p><strong>HTML</strong>：超文本标记语言（<strong>H</strong>yper <strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage）</p> <ol><li>不是编程语言，而是<strong>标记语言</strong>（markup language）—— <strong>不同的标记（标签 Tag）表示不同的含义</strong></li> <li>超文本
<ol><li><strong>超级内容</strong>：除了文本还可以包含：<strong>图片</strong>、<strong>链接</strong>、<strong>音频</strong>、<strong>视频</strong>等；</li> <li><strong>超级链接</strong>：页面间的跳转，让网站内部联系起来，让各个网站联系起来。</li></ol></li></ol></li></ol> <h4 id="_1-3-3-网页的形成"><a href="#_1-3-3-网页的形成" class="header-anchor">#</a> 1.3.3 网页的形成</h4> <ol><li>前端工程师用<strong>开发工具</strong>写代码 —— 标签及内容；</li> <li><strong>浏览器</strong>解释和渲染代码
<ol><li>解释：读取 HTML 并分析 HTML 结构和内容；</li> <li>渲染：生成最后的页面并显示结果；</li></ol></li> <li>用户在<strong>浏览器</strong>中浏览页面的<strong>展示结果</strong>。</li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><strong>渲染</strong>：在前端领域，通常把浏览器根据网页结构绘制最终结果的过程叫做渲染。</p> <ul><li>初学者先知道这个概念，并知道是由浏览器完成的就行；</li> <li>后续要学习一些相关原理，了解怎样编写代码能够让浏览器的渲染更快 —— <strong>性能优化</strong>。</li></ul></div> <h3 id="_1-4-「知道」常用浏览器以及内核-04-43"><a href="#_1-4-「知道」常用浏览器以及内核-04-43" class="header-anchor">#</a> 1.4 「知道」常用浏览器以及内核（04'43'')</h3> <h4 id="_1-4-1-「常用浏览器以及内核」内容"><a href="#_1-4-1-「常用浏览器以及内核」内容" class="header-anchor">#</a> 1.4.1 「常用浏览器以及内核」内容</h4> <ol><li>常用浏览器有几个？分别是？</li> <li>浏览器内核的作用是什么？</li> <li>知道前端工程师开发必备的浏览器是什么？</li></ol> <h4 id="_1-4-2-「常用浏览器以及内核」重点"><a href="#_1-4-2-「常用浏览器以及内核」重点" class="header-anchor">#</a> 1.4.2 「常用浏览器以及内核」重点</h4> <ol><li><p>五大浏览器</p> <ol><li>谷歌浏览器 <code>Chrome</code></li> <li>火狐浏览器 <code>Firefox</code></li> <li><code>Safari（苹果电脑</code> / iPhone / iPAD）</li> <li><code>IE</code> / <code>Edge</code>（微软）</li> <li>欧朋浏览器 <code>Opera</code></li></ol></li> <li><p>浏览器内核</p> <ul><li>浏览器内核（渲染引擎），负责读取网页内容，计算网页显示方式并显示结果。</li></ul> <table><thead><tr><th>浏览器</th> <th>内核</th> <th>备注</th></tr></thead> <tbody><tr><td>IE</td> <td>Trident</td> <td>IE、猎豹安全、360 极速浏览器、百度浏览器</td></tr> <tr><td>FireFox</td> <td>Gecko</td> <td>火狐浏览器内核</td></tr> <tr><td>Safari</td> <td>Webkit</td> <td>苹果浏览器内核</td></tr> <tr><td>Chrome / Opera</td> <td>Blink</td> <td>Blink 其实是 Webkit 的分支</td></tr></tbody></table></li></ol> <h5 id="浏览器份额扩展阅读"><a href="#浏览器份额扩展阅读" class="header-anchor">#</a> 浏览器份额扩展阅读</h5> <ol><li><a href="https://tech.sina.com.cn/i/2020-05-03/doc-iirczymi9668392.shtml" target="_blank" rel="noopener noreferrer">全球浏览器大战：谷歌 Chrome 独霸 69.18％份额<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 2020-05-03</li> <li><a href="https://os.51cto.com/art/202008/622792.htm" target="_blank" rel="noopener noreferrer">七月浏览器市场份额：Firefox 势头又降，IE 或将再度退位<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 2020-08-03</li></ol> <p><img src="/basenode/assets/img/browser-market-share.94aee74a.png" alt="浏览器市场份额"></p> <h3 id="_1-5-「知道」web-标准-07-32"><a href="#_1-5-「知道」web-标准-07-32" class="header-anchor">#</a> 1.5 「知道」Web 标准（07'32'')</h3> <h4 id="_1-5-1-「web-标准」内容"><a href="#_1-5-1-「web-标准」内容" class="header-anchor">#</a> 1.5.1 「Web 标准」内容</h4> <ol><li>为什么需要 Web 标准？</li> <li>Web 标准的构成有哪些？</li></ol> <h4 id="_1-5-2-「web-标准」重点"><a href="#_1-5-2-「web-标准」重点" class="header-anchor">#</a> 1.5.2 「Web 标准」重点</h4> <ol><li><p>为什么需要 Web 标准</p> <ul><li>让不同的浏览器按照相同的标准显示结果，展示统一内容。</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在很久以前，<strong>浏览器的兼容</strong>是网页设计师的噩梦。</p> <p><code>IE 6.0</code> 是大家最嫌弃的浏览器，曾被评为史上最烂软件 Top 10。</p></div></li> <li><p>Web 标准的构成有哪些？</p> <table><thead><tr><th>标准</th> <th>内容</th> <th>说明</th></tr></thead> <tbody><tr><td>结构</td> <td>HTML</td> <td>网页元素的结构和内容</td></tr> <tr><td>表现</td> <td>CSS</td> <td>网页元素的外观和位置，包括：版式、颜色、大小等</td></tr> <tr><td>行为</td> <td>JavaScript</td> <td>网页模型的定义与交互</td></tr></tbody></table> <blockquote><p>相比较而言，<strong>结构</strong>最重要。</p></blockquote> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Java 和 JavaScript 就是<strong>雷锋</strong>和<strong>雷峰塔</strong>的关系。</p></div></li></ol> <h4 id="_1-5-3-演示品优购项目的结构和表现-05-00"><a href="#_1-5-3-演示品优购项目的结构和表现-05-00" class="header-anchor">#</a> 1.5.3 演示品优购项目的结构和表现（05'00'')</h4> <ol><li>用浏览器打开品优购项目；</li> <li>点击右键选择「检查」
<img src="/basenode/assets/img/chrome-check-menu.d873dfa4.png" width="200"></li> <li>删除下图中的 CSS 文件并观察浏览器中的页面显示效果：
<img src="/basenode/assets/img/shopping-project-css-files.c6bec347.png" alt="品优购项目的CSS文件"></li></ol> <h2 id="_2-「重点」html-骨架-第-2-节课"><a href="#_2-「重点」html-骨架-第-2-节课" class="header-anchor">#</a> 2. 「重点」HTML 骨架（第 2 节课）</h2> <h3 id="_2-1-「知道」html-标签导读-01-05"><a href="#_2-1-「知道」html-标签导读-01-05" class="header-anchor">#</a> 2.1 「知道」HTML 标签导读（01'05''）</h3> <blockquote><p>过渡视频，介绍「HTML 标签」的重点内容</p></blockquote> <ol><li>知道标签的书写规范</li> <li>知道 HTML 骨架</li> <li>「重点」<strong>应用</strong>常用标签编写页面基本元素</li> <li>知道路径的三种形式</li></ol> <h3 id="_2-2-「重点」html-语法规范-07-10"><a href="#_2-2-「重点」html-语法规范-07-10" class="header-anchor">#</a> 2.2 「重点」HTML 语法规范（07'10''）</h3> <h4 id="_2-2-1-「html-语法规范」内容"><a href="#_2-2-1-「html-语法规范」内容" class="header-anchor">#</a> 2.2.1 「HTML 语法规范」内容</h4> <ol><li>标签的书写规范是什么？</li> <li>双标签和单标签的特点是什么？</li> <li>标签的关系有哪些？</li></ol> <h4 id="_2-2-2-「html-语法规范」重点"><a href="#_2-2-2-「html-语法规范」重点" class="header-anchor">#</a> 2.2.2 「HTML 语法规范」重点</h4> <ol><li>标签的规范
<ol><li>所有标签都包含在 <code>&lt;&gt;</code> 中间，例如：<code>&lt;html&gt;</code></li> <li>大多标签都是成对出现的（双标签），例如：<code>&lt;html&gt;&lt;/html&gt;</code>，其中：
<ol><li><code>&lt;tag&gt;</code> 开始标签</li> <li><code>&lt;/tag&gt;</code> 结束标签，结束标签在标签名前有一个 <code>/</code>（斜线）</li></ol></li> <li>单标签不需要结束标签，例如：<code>&lt;br&gt;</code></li></ol></li> <li>标签的关系
<ol><li>包含关系：父子</li> <li>并列关系：兄弟</li></ol></li></ol> <p>提示：</p> <ol><li><code>/</code> 叫做斜线（SHIFT 左边），<code>\</code> 叫做反斜线（回车上面）；</li> <li>在 H5 单标签不用写 <code>/</code> 表示结束，直接 <code>&lt;br&gt;</code></li></ol> <h4 id="_2-2-3-「html-语法规范」标签的嵌套-05-00"><a href="#_2-2-3-「html-语法规范」标签的嵌套-05-00" class="header-anchor">#</a> 2.2.3 「HTML 语法规范」标签的嵌套（05'00''）</h4> <ol><li><p>正确的标签嵌套关系</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><blockquote><p>无论怎样拆分标签，开始和结束标签都能保持完整。</p></blockquote></li> <li><p>错误的标签嵌套关系</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><blockquote><p>在拆分标签时，开始和结束标签的完整性不能被破坏。</p></blockquote></li></ol> <h4 id="_2-2-4-「html-语法规范」h5-中的单标签写法-02-00"><a href="#_2-2-4-「html-语法规范」h5-中的单标签写法-02-00" class="header-anchor">#</a> 2.2.4 「HTML 语法规范」H5 中的单标签写法（02'00'')</h4> <ol><li><p>在很久以前，由于程序员对 HTML 不够重视，编写的 HTML 千奇百怪，给浏览器的开发带来了很大的难度。</p> <ul><li>那个时候，是<strong>浏览器兼容程序员错误的写法</strong>，但是最终的结果确是浏览器被喷。</li></ul></li> <li><p>在 HTML 4.01（XHTML）时代，程序员约定<strong>严格</strong>按照标准编写代码，从而不仅能降低开发成本，还能提高浏览器的效率。</p> <ul><li>那个时候，要求所有的标签必须<strong>有开始，有结束</strong>，单标签必须以 <code>/</code> 结束，例如 <code>br /</code></li></ul></li> <li><p>在 H5 时代，前端工程师的代码已经越来越规范，所以倡导进一步简化代码，因此现在<strong>不再要求单标签仍然书写表示结束的 <code>/</code></strong>。</p></li></ol> <h3 id="_2-3-「重点」html-基本结构标签-07-10"><a href="#_2-3-「重点」html-基本结构标签-07-10" class="header-anchor">#</a> 2.3 「重点」HTML 基本结构标签（07'10''）</h3> <h4 id="_2-3-1-「html-基本结构标签」内容"><a href="#_2-3-1-「html-基本结构标签」内容" class="header-anchor">#</a> 2.3.1 「HTML 基本结构标签」内容</h4> <ul><li>4 个基本标签是什么？</li> <li>4 个基本标签的作用是什么？</li></ul> <blockquote><p>应用<strong>骨架标签</strong>（基本结构标签）制作第一个 HTML 页面</p></blockquote> <h4 id="_2-3-2-「html-基本结构标签」重点"><a href="#_2-3-2-「html-基本结构标签」重点" class="header-anchor">#</a> 2.3.2 「HTML 基本结构标签」重点</h4> <table><thead><tr><th>标签名</th> <th>说明</th></tr></thead> <tbody><tr><td><code>html</code></td> <td>根标签，是页面中最大的标签</td></tr> <tr><td><code>head</code></td> <td>设置页面信息，例如网页标题 <code>title</code> 以及其他告诉浏览器或爬虫的信息</td></tr> <tr><td><code>title</code></td> <td>网页标题，显示在浏览器标签上</td></tr> <tr><td><code>body</code></td> <td>网页文档内容，供用户浏览</td></tr></tbody></table> <h4 id="_2-3-3-「html-基本结构标签」课堂练习-05-00"><a href="#_2-3-3-「html-基本结构标签」课堂练习-05-00" class="header-anchor">#</a> 2.3.3 「HTML 基本结构标签」课堂练习（05'00)</h4> <ol><li><p>新建文本文件：<code>第一个页面.txt</code>；</p></li> <li><p>输入以下代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>第一个页面<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    键盘敲烂，工资过万。
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>将文件重命名为 <code>第一个页面.html</code></p></li> <li><p>双击文件使用浏览器浏览效果，注意观察<strong>标题栏</strong>和<strong>正文</strong>的显示</p></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>显示后缀名的方法：</p> <ul><li>Windows 10
<img src="/basenode/assets/img/show-file-extension.5f19abf4.png" alt="显示文件扩展名"></li> <li>Windows 7
工具 → 文件夹选项 → 查看 → 隐藏已知文件类型的扩展名（<strong>去掉勾选</strong>）</li></ul></div> <h3 id="_2-4-「重点」vscode-工具创建页面-06-35"><a href="#_2-4-「重点」vscode-工具创建页面-06-35" class="header-anchor">#</a> 2.4 「重点」VSCode 工具创建页面（06'35''）</h3> <h4 id="_2-4-1-「vscode-工具创建页面」内容"><a href="#_2-4-1-「vscode-工具创建页面」内容" class="header-anchor">#</a> 2.4.1 「VSCode 工具创建页面」内容</h4> <ol><li>知道网页常用开发工具</li> <li>VSCode 创建 HTML 骨架结构的方式是什么？</li></ol> <h4 id="_2-4-2-「vscode-工具创建页面」重点"><a href="#_2-4-2-「vscode-工具创建页面」重点" class="header-anchor">#</a> 2.4.2 「VSCode 工具创建页面」重点</h4> <ol><li><p>网页常用开发工具</p> <table><thead><tr><th>开发工具</th> <th>特点</th></tr></thead> <tbody><tr><td>Dreamweaver</td> <td>古董</td></tr> <tr><td>Sublime</td> <td>速度快，体积小，插件多，插件安装复杂</td></tr> <tr><td>Webstrom</td> <td>功能强大，付费，慢</td></tr> <tr><td>HBuilder X</td> <td>就业班后期会讲用 HBuilder 打包</td></tr> <tr><td><strong>Visual Studio Code</strong></td> <td>前端神器，速度快，体积小，插件多</td></tr></tbody></table></li> <li><p>应用 VSCode 创建页面骨架的方式</p> <ol><li>新建并保存文件，文件的扩展名是 <code>html</code></li> <li><code>!</code> + 回车 / <code>!</code> + <code>TAB</code></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>TAB 键在大写键的上方。</p></div></li></ol> <h4 id="_2-4-3-「vscode-工具创建页面」课堂练习-05-00"><a href="#_2-4-3-「vscode-工具创建页面」课堂练习-05-00" class="header-anchor">#</a> 2.4.3 「VSCode 工具创建页面」课堂练习（05'00)</h4> <ol><li><p>新建并保存 <code>03-vscode创建的页面.html</code></p></li> <li><p>输入以下代码：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>VSCode 创建的页面<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    写代码是一件非常快乐的事情
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>注意：创建完页面骨架内容后，要<strong>用鼠标点击切换一下光标位置</strong>。</p></div></li> <li><p>点击右键，选择 <code>Open in Default Browser</code> 查看页面效果</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>写一句自己想对自己说的话，<code>ctrl + s</code> 保存后，在浏览器中 <code>F5</code> 刷新查看效果。</p></div></li></ol> <h3 id="_2-5-「知道」doctype-和-lang-以及字符集的作用-08-58"><a href="#_2-5-「知道」doctype-和-lang-以及字符集的作用-08-58" class="header-anchor">#</a> 2.5 「知道」DOCTYPE 和 lang 以及字符集的作用（08'58''）</h3> <h4 id="_2-5-1-「doctype-和-lang-以及字符集的作用」内容"><a href="#_2-5-1-「doctype-和-lang-以及字符集的作用」内容" class="header-anchor">#</a> 2.5.1 「DOCTYPE 和 lang 以及字符集的作用」内容</h4> <ol><li>了解用 VSCode 工具生成骨架标签的新增代码，包括：
<ol><li><code>&lt;!DOCTYPE html&gt;</code> 标签</li> <li><code>lang</code> 语言</li> <li><code>charset</code> 字符集</li></ol></li></ol> <h4 id="_2-5-2-「doctype-和-lang-以及字符集的作用」重点"><a href="#_2-5-2-「doctype-和-lang-以及字符集的作用」重点" class="header-anchor">#</a> 2.5.2 「DOCTYPE 和 lang 以及字符集的作用」重点</h4> <ol><li><p><code>&lt;!DOCTYPE html&gt;</code> 告诉浏览器当前页面是 H5 的网页</p> <ul><li>必须写在页面的第一行，<code>&lt;html&gt;</code> 的上方</li> <li>不是 HTML 标签，是文档类型的声明标签</li></ul></li> <li><p><code>lang</code> 定义当前文档显示的语言</p> <ul><li><code>en</code> 英语</li> <li><code>zh-CN</code> 中文</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li><strong>浏览器</strong>会根据 <code>lang</code> 设定提示是否需要翻译</li> <li><strong>搜索引擎</strong>会根据页面的 <code>lang</code> 设定对网页分类</li></ul></div></li> <li><p><code>charset=&quot;UTF-8&quot;</code></p> <ul><li>网页中一定要写，否则有可能会出现<strong>乱码</strong>的情况</li> <li><code>UTF-8</code>（万国码）以前常用的字符集
<ul><li><code>GB2312</code>：常用汉字</li> <li><code>GBK</code>：国标汉字</li> <li><code>BIG5</code>：繁体中文（台湾）</li></ul></li></ul></li></ol> <h2 id="_3-「重点」html-常用标签-第-3-节课"><a href="#_3-「重点」html-常用标签-第-3-节课" class="header-anchor">#</a> 3. 「重点」HTML 常用标签（第 3 节课）</h2> <h3 id="_3-1-「知道」标签语义-02-21"><a href="#_3-1-「知道」标签语义-02-21" class="header-anchor">#</a> 3.1 「知道」标签语义（02'21''）</h3> <h4 id="_3-1-1-「标签语义」内容"><a href="#_3-1-1-「标签语义」内容" class="header-anchor">#</a> 3.1.1 「标签语义」内容</h4> <blockquote><p>过渡视频，介绍语义标签的作用。</p></blockquote> <ul><li>问题：视频中提到了哪两个语义标签？</li></ul> <h4 id="_3-1-2-「标签语义」重点"><a href="#_3-1-2-「标签语义」重点" class="header-anchor">#</a> 3.1.2 「标签语义」重点</h4> <ul><li>语义标签
<ul><li>标签的语义就是标签的含义，这个标签能干啥？</li> <li>在合适的地方放一个合理的标签，可以<strong>让页面的结构更清晰</strong></li></ul></li></ul> <h3 id="_3-2-「应用」标题标签-05-14"><a href="#_3-2-「应用」标题标签-05-14" class="header-anchor">#</a> 3.2 「应用」标题标签（05'14''）</h3> <h4 id="_3-2-1-「标题标签」内容"><a href="#_3-2-1-「标题标签」内容" class="header-anchor">#</a> 3.2.1 「标题标签」内容</h4> <ul><li>问题 1：HTML 提供了几个等级的标题？</li> <li>问题 2：哪个级别的标题最重要？</li> <li>问题 3：哪个级别的标题字号最大？</li></ul> <h4 id="_3-2-2-「标题标签」重点"><a href="#_3-2-2-「标题标签」重点" class="header-anchor">#</a> 3.2.2 「标题标签」重点</h4> <ul><li>标题标签 <code>&lt;h1&gt;</code> ~ <code>&lt;h6&gt;</code> <ul><li>重要性依次递减</li> <li>字号依次递减</li></ul></li> <li>每个标题独占一行</li></ul> <h4 id="_3-2-3-「标题标签」课堂练习-05-00"><a href="#_3-2-3-「标题标签」课堂练习-05-00" class="header-anchor">#</a> 3.2.3 「标题标签」课堂练习（05'00'')</h4> <ol><li><p>新建并保存 <code>04-标题标签.html</code></p></li> <li><p>输入以下内容，并依次设置不同的标题标签 <code>h1</code>~<code>h6</code></p> <div class="language-txt extra-class"><pre class="language-text"><code>标题一共六级选，
文字加粗一行显。
由大到小依次减，
从重到轻随之变。
语法规范书写后，
具体效果刷新见。
</code></pre></div></li></ol> <h3 id="_3-3-「应用」段落标签和换行标签-06-23"><a href="#_3-3-「应用」段落标签和换行标签-06-23" class="header-anchor">#</a> 3.3 「应用」段落标签和换行标签（06'23''）</h3> <h4 id="_3-3-1-「段落标签和换行标签」内容"><a href="#_3-3-1-「段落标签和换行标签」内容" class="header-anchor">#</a> 3.3.1 「段落标签和换行标签」内容</h4> <ul><li>问题 1：段落标签和换行标签的作用是什么？</li> <li>问题 2：段落标签的是什么？</li> <li>问题 3：换行标签是什么？</li> <li>问题 4：在 VSCode 中看到的文本排列方式和浏览器中的一样吗？</li></ul> <h4 id="_3-3-2-「段落标签和换行标签」重点"><a href="#_3-3-2-「段落标签和换行标签」重点" class="header-anchor">#</a> 3.3.2 「段落标签和换行标签」重点</h4> <ul><li><p><code>p</code> 段落标签：显示一个段落的文字</p> <ul><li>文本在一个段落中会根据浏览器窗口的大小自动换行</li> <li>段落和段落之间有一定的空隙</li></ul></li> <li><p><code>br</code> 换行标签：会把文字强制换行</p> <ul><li><code>br</code> 是个单标签</li> <li><code>br</code> 换行后只是另起一行，不像 <code>p</code> 标签会有明显的间距</li></ul></li></ul> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>注意：浏览器在显示页面时，会把 HTML 文件中<strong>多个空格或换行合并成一个空格</strong>显示。</p></div> <h4 id="_3-3-3-「段落标签和换行标签」课堂练习-05-00"><a href="#_3-3-3-「段落标签和换行标签」课堂练习-05-00" class="header-anchor">#</a> 3.3.3 「段落标签和换行标签」课堂练习（05'00'')</h4> <ol><li><p>新建并保存 <code>05-段落和换行.html</code></p></li> <li><p>输入以下内容，并实现以下效果：</p> <div class="language-txt extra-class"><pre class="language-text"><code>黄山

黄山：世界文化与自然双重遗产，世界地质公园，国家AAAAA级旅游景区，国家级风景名胜区，全国文明风景旅游区示范点，中华十大名山，天下第一奇山。

黄山位于安徽省南部黄山市境内，有72峰，主峰莲花峰海拔1864米，与光明顶、天都峰并称三大黄山主峰，为36大峰之一。黄山是安徽旅游的标志。

黄山十大名松：

迎客松
送客松
蒲团松
竖琴松
麒麟松
探海松
接引松
连理松
黑虎松
龙爪松
</code></pre></div><ul><li><p>案例效果</p> <p><img src="/basenode/assets/img/practice-p-br.b60b2faf.png" alt="段落与换行练习"></p></li></ul></li></ol> <h3 id="_3-4-「应用」体育新闻案例-04-26"><a href="#_3-4-「应用」体育新闻案例-04-26" class="header-anchor">#</a> 3.4 「应用」体育新闻案例（04'26''）</h3> <h4 id="_3-4-1-「体育新闻案例」内容"><a href="#_3-4-1-「体育新闻案例」内容" class="header-anchor">#</a> 3.4.1 「体育新闻案例」内容</h4> <ul><li>问题 1：为什么老师在开始写页面前要分析代码？</li> <li>问题 2：案例中的 H4 可不可以换成 H3？</li></ul> <h4 id="_3-4-2-「体育新闻案例」重点"><a href="#_3-4-2-「体育新闻案例」重点" class="header-anchor">#</a> 3.4.2 「体育新闻案例」重点</h4> <ul><li>前端工程师一定要养成先分析页面再写代码的习惯
<ul><li>分析页面：规划蓝图</li> <li>编写代码：实现蓝图</li></ul></li> <li>案例中的 H4 是可以换成 H3 的，不同人对页面分析的结构不同，代码实现的方式也会不同</li></ul> <h4 id="_3-4-3-「体育新闻案例」课堂练习-05-00"><a href="#_3-4-3-「体育新闻案例」课堂练习-05-00" class="header-anchor">#</a> 3.4.3 「体育新闻案例」课堂练习（05'00'')</h4> <ol><li><p>新建并保存 <code>06-体育新闻案例.html</code></p></li> <li><p>输入以下内容，并实现视频中的案例效果</p> <div class="language-txt extra-class"><pre class="language-text"><code>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0
数据统计：水花兄弟合砍61分
库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。

汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。

兄弟对决升级：小库里给哥哥造成压力
库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。

但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里，在防守端给库里造成了极大的困扰。

作者: 你的名字
2020-9-13
</code></pre></div><ul><li><p>案例效果</p> <p><img src="/basenode/assets/img/practice-pe-news.eb9e8fd7.png" alt="体育新闻案例效果"></p></li></ul></li></ol> <h3 id="_3-5-「应用」文本格式化标签-07-43"><a href="#_3-5-「应用」文本格式化标签-07-43" class="header-anchor">#</a> 3.5 「应用」文本格式化标签（07'43''）</h3> <h4 id="_3-5-1-「文本格式化标签」内容"><a href="#_3-5-1-「文本格式化标签」内容" class="header-anchor">#</a> 3.5.1 「文本格式化标签」内容</h4> <ul><li>问题 1：文本格式化标签的作用是什么 ？</li> <li>问题 2：视频中讲了几类文本格式化标签？</li> <li>问题 3：为什么推荐使用单词较长的标签？</li></ul> <h4 id="_3-5-2-「文本格式化标签」重点"><a href="#_3-5-2-「文本格式化标签」重点" class="header-anchor">#</a> 3.5.2 「文本格式化标签」重点</h4> <ul><li><p>文本格式化标签的做用：突出显示，比普通文字重要</p></li> <li><p>文本格式化标签</p> <table><thead><tr><th>标签</th> <th>说明</th></tr></thead> <tbody><tr><td><code>strong</code> 或 <code>b</code></td> <td>加粗，更推荐 <code>strong</code></td></tr> <tr><td><code>em</code> 或 <code>i</code></td> <td>倾斜，更推荐 <code>em</code></td></tr> <tr><td><code>del</code> 或 <code>s</code></td> <td>删除线，更推荐 <code>del</code></td></tr> <tr><td><code>ins</code> 或 <code>u</code></td> <td>下划线，更推荐 <code>ins</code></td></tr></tbody></table> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>使用 <code>strong</code>、<code>em</code>、<code>del</code>、<code>ins</code> 语义更清晰、更强烈。</p> <ul><li>重点记忆：<code>strong</code> 加粗、<code>i</code> 后续会用在字体图标。</li></ul></div></li></ul> <h4 id="_3-5-3-「文本格式化标签」课堂练习-05-00"><a href="#_3-5-3-「文本格式化标签」课堂练习-05-00" class="header-anchor">#</a> 3.5.3 「文本格式化标签」课堂练习（05'00'')</h4> <ol><li><p>新建并保存 <code>07-文本格式化标签.html</code></p></li> <li><p>输入以下内容，并实现视频中的案例效果</p> <div class="language-txt extra-class"><pre class="language-text"><code>strong b 我是加粗的文字 我是加粗的文字
em i 我是倾斜的文字 我是倾斜的文字
del s 我是删除线 我是删除线
ins u 我是下划线 我是下划线
</code></pre></div></li></ol> <h2 id="_4-「重点」html-常用标签-第-4-节课"><a href="#_4-「重点」html-常用标签-第-4-节课" class="header-anchor">#</a> 4. 「重点」HTML 常用标签（第 4 节课）</h2> <h3 id="_4-1-「应用」div-和-span-标签-04-43"><a href="#_4-1-「应用」div-和-span-标签-04-43" class="header-anchor">#</a> 4.1 「应用」div 和 span 标签（04'43''）</h3> <h4 id="_4-1-1-「div-和-span-标签」内容"><a href="#_4-1-1-「div-和-span-标签」内容" class="header-anchor">#</a> 4.1.1 「div 和 span 标签」内容</h4> <ul><li>问题 1：<code>div</code> 和 <code>span</code> 标签的语义是什么 ？</li> <li>问题 2：<code>div</code> 和 <code>span</code> 的区别时什么？</li></ul> <h4 id="_4-1-2-「div-和-span-标签」重点"><a href="#_4-1-2-「div-和-span-标签」重点" class="header-anchor">#</a> 4.1.2 「div 和 span 标签」重点</h4> <ul><li><p><code>div</code> 和 <code>span</code> 没有语义，是在<strong>布局</strong>时用来装东西的盒子，<strong>非常常用</strong>！</p></li> <li><p><code>div</code> 和 <code>span</code> 的区别</p> <table><thead><tr><th>标签名</th> <th>说明</th></tr></thead> <tbody><tr><td><code>div</code></td> <td>大盒子，一行一个（现在）</td></tr> <tr><td><code>span</code></td> <td>小盒子，一行多个</td></tr></tbody></table></li></ul> <h4 id="_4-1-3-「div-和-span-标签」课堂练习-05-00"><a href="#_4-1-3-「div-和-span-标签」课堂练习-05-00" class="header-anchor">#</a> 4.1.3 「div 和 span 标签」课堂练习（05'00'')</h4> <ol><li><p>新建并保存 <code>08-div和span.html</code></p></li> <li><p>输入以下内容，并实现视频中的案例效果</p> <div class="language-txt extra-class"><pre class="language-text"><code>我是div我独占一行
腾讯 阿里 百度
</code></pre></div></li></ol> <h3 id="_4-2-「应用」图像标签-上-09-12"><a href="#_4-2-「应用」图像标签-上-09-12" class="header-anchor">#</a> 4.2 「应用」图像标签(上)（09'12''）</h3> <h4 id="_4-2-1-「图像标签-上-」内容"><a href="#_4-2-1-「图像标签-上-」内容" class="header-anchor">#</a> 4.2.1 「图像标签(上)」内容</h4> <ul><li>问题 1：在 HTML 中，用哪一个标签来定义图像？</li> <li>问题 2：图像标签的必须属性是什么？为什么？</li> <li>问题 3：属性的书写位置在哪里？</li></ul> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>观看视频时请注意<strong>属性</strong>的编写格式。</p></div> <h4 id="_4-2-2-「图像标签-上-」重点"><a href="#_4-2-2-「图像标签-上-」重点" class="header-anchor">#</a> 4.2.2 「图像标签(上)」重点</h4> <ul><li><p>图像标签：<code>img</code>，英文单词 <code>image</code> 的缩写</p></li> <li><p>属性</p> <ul><li><code>src</code>：指定图像文件的路径和文件名</li> <li><code>alt</code>：替换文本，图像不显示时显示</li> <li><code>title</code>：提示文本，鼠标悬停的时候显示</li></ul></li> <li><p>属性写在开始标签中，在标签的名字后面，语法格式如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>标签名</span> <span class="token attr-name">属性名1</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>属性值1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">属性名2</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>属性值2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li><strong>属性名</strong>有智能提示，不需要硬记；</li> <li><strong>属性值</strong>需要用<strong>双引号</strong>引起来；</li> <li><strong>属性</strong>与<strong>属性</strong>之间使用空格分开。</li></ul></div></li></ul> <h4 id="_4-2-3-「图像标签-上-」课堂练习-05-00"><a href="#_4-2-3-「图像标签-上-」课堂练习-05-00" class="header-anchor">#</a> 4.2.3 「图像标签(上)」课堂练习（05'00'')</h4> <ol><li><p>新建并保存 <code>09-图像标签.html</code></p></li> <li><p>在下图上点击鼠标右键，选择「图片另存为」保存到自己的<strong>代码目录</strong>，并命名为 <code>img.jpg</code>：</p> <p><img src="/basenode/assets/img/img.fb9aef94.jpg" alt="案例头像图片"></p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>注意</p> <ul><li><code>img.jpg</code> 必须和自己的 html 文件<strong>在同一个目录下</strong>；</li> <li>务必要<strong>注意保存的文件名</strong>。</li></ul></div></li> <li><p>实现视频中的案例效果，替换文字 <code>alt</code> 和提示文字 <code>title</code> 可以随便写。</p></li></ol> <h3 id="_4-3-「应用」图像标签-下-04-14"><a href="#_4-3-「应用」图像标签-下-04-14" class="header-anchor">#</a> 4.3 「应用」图像标签(下)（04'14''）</h3> <h4 id="_4-3-1-「图像标签-下-」内容"><a href="#_4-3-1-「图像标签-下-」内容" class="header-anchor">#</a> 4.3.1 「图像标签(下)」内容</h4> <ul><li>问题 1：图像的<strong>宽度</strong>和<strong>高度</strong>需要同时指定吗 ？为什么？</li> <li>问题 2：哪一个属性没有智能提示？</li></ul> <h4 id="_4-3-2-「图像标签-下-」重点"><a href="#_4-3-2-「图像标签-下-」重点" class="header-anchor">#</a> 4.3.2 「图像标签(下)」重点</h4> <ul><li>宽度属性 <code>width</code> / 高度属性 <code>height</code>；</li> <li>现阶段<strong>不需要同时指定宽高</strong>，浏览器会根据已经指定的<strong>宽</strong>或<strong>高</strong>，等比例缩放图像；</li> <li>边框属性 <code>border</code> 没有智能提示</li></ul> <h4 id="_4-3-3-「图像标签-下-」课堂练习-05-00"><a href="#_4-3-3-「图像标签-下-」课堂练习-05-00" class="header-anchor">#</a> 4.3.3 「图像标签(下)」课堂练习（05'00'')</h4> <ul><li><p>继续上一小节课堂练习，完成图像<strong>宽度</strong>、<strong>高度</strong>和<strong>边框</strong>的设定。</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span>
  <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img.jpg<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>我帅吗？<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>我是pink老师<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>500<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>15<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">/&gt;</span></span>
</code></pre></div></li></ul> <h3 id="_4-4-「应用」图像标签注意点-02-42"><a href="#_4-4-「应用」图像标签注意点-02-42" class="header-anchor">#</a> 4.4 「应用」图像标签注意点（02'42''）</h3> <h4 id="_4-4-1-「图像标签注意点」内容"><a href="#_4-4-1-「图像标签注意点」内容" class="header-anchor">#</a> 4.4.1 「图像标签注意点」内容</h4> <ul><li>问题 1：图像标签哪些属性是必须要写的？</li> <li>问题 2：<code>alt</code> 和 <code>title</code> 有什么区别？</li></ul> <h2 id="_5-「重点」html-常用标签-第-5-节课"><a href="#_5-「重点」html-常用标签-第-5-节课" class="header-anchor">#</a> 5. 「重点」HTML 常用标签（第 5 节课）</h2> <h3 id="_5-1-「知道」目录文件夹和根目录-06-33"><a href="#_5-1-「知道」目录文件夹和根目录-06-33" class="header-anchor">#</a> 5.1 「知道」目录文件夹和根目录（06'33''）</h3> <h4 id="_5-1-1-「目录文件夹和根目录」内容"><a href="#_5-1-1-「目录文件夹和根目录」内容" class="header-anchor">#</a> 5.1.1 「目录文件夹和根目录」内容</h4> <ul><li>问题 1：什么是网站根目录？</li> <li>问题 2：用 VSCode 能直接打开一个文件夹吗？你知道几种打开文件夹的方式？</li> <li>问题 3：用 VSCode 如何能够新建文件的同时就指定文件名？</li></ul> <h4 id="_5-1-2-「目录文件夹和根目录」重点"><a href="#_5-1-2-「目录文件夹和根目录」重点" class="header-anchor">#</a> 5.1.2 「目录文件夹和根目录」重点</h4> <ul><li>目录文件夹：就是普通文件夹，可以保存多个文件和其他文件夹；</li> <li>网站根目录：一个网站项目的第一层文件夹，保存所有网站需要的网页和素材。</li> <li>VSCode 打开文件夹的三种方式
<ul><li>在 VSCode 中通过菜单命令打开；</li> <li>在资源管理中，选中文件夹点击右键，选择「通过 Code 打开」；</li> <li>直接将文件夹拖拽到文本编辑区域。</li></ul></li></ul> <h3 id="_5-2-「应用」相对路径-上-06-10"><a href="#_5-2-「应用」相对路径-上-06-10" class="header-anchor">#</a> 5.2 「应用」相对路径(上)（06'10''）</h3> <h4 id="_5-2-1-「相对路径-上-」内容"><a href="#_5-2-1-「相对路径-上-」内容" class="header-anchor">#</a> 5.2.1 「相对路径(上)」内容</h4> <ul><li>问题 1：什么是相对路径？</li> <li>问题 2：<code>.</code> 是什么意思？</li> <li>问题 3：文件夹之间用什么符号分隔？</li></ul> <h4 id="_5-2-2-「相对路径-上-」重点"><a href="#_5-2-2-「相对路径-上-」重点" class="header-anchor">#</a> 5.2.2 「相对路径(上)」重点</h4> <ul><li>相对路径：相对某一个路径的路径，位置变化，相对路径可能会无效</li> <li><code>.</code> 表示当前路径</li> <li>文件夹之间使用 <code>/</code> 分隔</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>从 <code>.</code> 开始向下找是一个很好的习惯。</p></div> <h4 id="_5-2-3-「相对路径-上-」课堂练习-05-00"><a href="#_5-2-3-「相对路径-上-」课堂练习-05-00" class="header-anchor">#</a> 5.2.3 「相对路径(上)」课堂练习（05'00'')</h4> <ol><li><p>新建并保存 <code>10-相对路径.html</code></p></li> <li><p>新建 <code>images</code> 文件夹，并把下图保存在 <code>images</code> 文件夹下，文件名同样是：<code>img.jpg</code> <img src="/basenode/assets/img/img1.fffab375.jpg" alt="练习图像2"></p></li> <li><p>使用相对路径显示当前目录和下级目录中的图像</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./img.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./images/img.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div></li></ol> <h3 id="_5-3-「应用」相对路径-下-02-56"><a href="#_5-3-「应用」相对路径-下-02-56" class="header-anchor">#</a> 5.3 「应用」相对路径(下)（02'56''）</h3> <h4 id="_5-3-1-「相对路径-下-」内容"><a href="#_5-3-1-「相对路径-下-」内容" class="header-anchor">#</a> 5.3.1 「相对路径(下)」内容</h4> <ul><li>问题 1：<code>..</code> 是什么意思？</li> <li>问题 2：一个文件会有多个上级文件夹吗？</li></ul> <h4 id="_5-3-2-「相对路径-下-」重点"><a href="#_5-3-2-「相对路径-下-」重点" class="header-anchor">#</a> 5.3.2 「相对路径(下)」重点</h4> <ul><li><code>..</code> 表示上一级文件夹</li> <li>一个文件最多只能有一个上级文件夹，不会有多个上级文件夹</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>存放在根目录中的文件，没有上级文件夹。</p> <p>提示：后续开发网站时，不要把文件放在网站根目录的外面。</p></div> <h3 id="_5-4-「应用」绝对路径-03-20"><a href="#_5-4-「应用」绝对路径-03-20" class="header-anchor">#</a> 5.4 「应用」绝对路径（03'20''）</h3> <h4 id="_5-4-1-「绝对路径」内容"><a href="#_5-4-1-「绝对路径」内容" class="header-anchor">#</a> 5.4.1 「绝对路径」内容</h4> <ul><li>问题 1：什么是绝对路径？</li> <li>问题 2：绝对路径能够定位唯一的文件或者文件夹吗？</li></ul> <h4 id="_5-4-2-「绝对路径」重点"><a href="#_5-4-2-「绝对路径」重点" class="header-anchor">#</a> 5.4.2 「绝对路径」重点</h4> <ul><li>绝对路径，就是文件或文件夹的绝对位置，能够直接定位。</li> <li>绝对路径能够定位唯一的文件或文件夹。</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li>使用<strong>相对路径</strong>，<strong>同一个文件</strong>会根据<strong>参照位置</strong>不同，对应的相对路径也不同；</li> <li>从 <code>.</code> 开始向下找是一个很好的习惯；</li> <li>在做网站开发时，是不会使用带盘符的绝对路径的。</li></ul></div> <h3 id="_5-5-「应用」链接标签-上-08-38"><a href="#_5-5-「应用」链接标签-上-08-38" class="header-anchor">#</a> 5.5 「应用」链接标签(上)（08'38''）</h3> <h4 id="_5-5-1-「链接标签-上-」内容"><a href="#_5-5-1-「链接标签-上-」内容" class="header-anchor">#</a> 5.5.1 「链接标签(上)」内容</h4> <ul><li>问题 1：链接标签的作用是什么？</li> <li>问题 2：链接标签是单标签还是双标签？为什么？</li> <li>问题 3：你认为哪一个属性是链接标签最重要的属性？</li> <li>问题 4：外部链接会跳转到哪里？</li></ul> <h4 id="_5-5-2-「链接标签-上-」重点"><a href="#_5-5-2-「链接标签-上-」重点" class="header-anchor">#</a> 5.5.2 「链接标签(上)」重点</h4> <ul><li><p>链接标签的作用：从一个<strong>页面链接</strong>跳转到<strong>另一个页面</strong>或者<strong>页面的其他位置</strong>；</p></li> <li><p>链接标签是<strong>双标签</strong></p> <ul><li>因为可以在链接标签<strong>内部</strong>包含其他元素。</li></ul></li> <li><p>链接标签的语法：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>跳转目标<span class="token punctuation">&quot;</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>窗口打开方式<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>文本或图像<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li><code>href</code>：目标位置</li> <li><code>target</code>：窗口打开方式
<ul><li><code>_self</code>（默认）在当前窗口打开</li> <li><code>_blank</code> 在新窗口中打开</li></ul></li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li><code>_self</code> 通常使用在当前网站的跳转</li> <li><code>_blank</code> 通常用在外部链接的跳转</li></ul></div> <h3 id="_5-6-「应用」链接标签-下-09-15"><a href="#_5-6-「应用」链接标签-下-09-15" class="header-anchor">#</a> 5.6 「应用」链接标签(下)（09'15''）</h3> <h4 id="_5-6-1-「链接标签-下-」内容"><a href="#_5-6-1-「链接标签-下-」内容" class="header-anchor">#</a> 5.6.1 「链接标签(下)」内容</h4> <ul><li>问题 1：内部链接会跳转到哪里？</li> <li>问题 2：内部链接能使用<strong>相对路径</strong>吗？为什么？</li> <li>问题 3：在开发时时候空链接？空链接有什么特点？</li> <li>问题 4：下载链接有相比较其他链接有什么特殊的？</li></ul> <h4 id="_5-6-2-「链接标签-下-」重点"><a href="#_5-6-2-「链接标签-下-」重点" class="header-anchor">#</a> 5.6.2 「链接标签(下)」重点</h4> <ol><li>外部链接，跳转到<strong>其他</strong>网站，跳出当前网站；</li> <li>内部链接，网站内部页面之间的相互链接，可以使用相对路径；</li> <li>空链接，开发过程中，还不能确定链接目标时可以<strong>暂时</strong>使用空链接；</li> <li>下载链接，如果 <code>href</code> 的地址是一个浏览器默认不支持的文件类型，就会下载；</li> <li>网页元素链接，因为 a 标签是一个双标签，a 标签包裹的任何元素都可以作为链接；</li> <li>锚点链接，在页面间快速定位的链接。</li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li>空链接会重新刷新页面。</li></ul></div> <h4 id="_5-6-3-「链接标签」课堂练习-05-00"><a href="#_5-6-3-「链接标签」课堂练习-05-00" class="header-anchor">#</a> 5.6.3 「链接标签」课堂练习（05'00'')</h4> <ol><li><p>新建 <code>11-链接标签.html</code>；</p></li> <li><p>使用外部链接在<strong>新窗口</strong>打开百度首页；</p></li> <li><p>使用内部链接在<strong>当前窗口</strong>打开 <code>10-相对路径.html</code>；</p></li> <li><p>创建一个空链接，点击空链接，观察地址栏的变化</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.baidu.com<span class="token punctuation">&quot;</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>_blank<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>百度一下，你就知道<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./10-相对路径.html<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>点我啊<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我是空链接<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <h2 id="_6-「重点」其他标签和综合案例-第-6-节课"><a href="#_6-「重点」其他标签和综合案例-第-6-节课" class="header-anchor">#</a> 6. 「重点」其他标签和综合案例（第 6 节课）</h2> <h3 id="_6-1-「应用」锚点链接-07-07"><a href="#_6-1-「应用」锚点链接-07-07" class="header-anchor">#</a> 6.1 「应用」锚点链接（07'07''）</h3> <h4 id="_6-1-1-「锚点链接」内容"><a href="#_6-1-1-「锚点链接」内容" class="header-anchor">#</a> 6.1.1 「锚点链接」内容</h4> <ul><li>问题 1：锚点链接的作用是什么？</li> <li>问题 2：目标标签需要增加什么属性，才能实现锚点链接的跳转？</li> <li>问题 3：锚点链接的语法是什么？</li></ul> <h4 id="_6-1-2-「锚点链接」重点"><a href="#_6-1-2-「锚点链接」重点" class="header-anchor">#</a> 6.1.2 「锚点链接」重点</h4> <ul><li>锚点链接可以实现页面内跳转</li> <li>目标标签需要增加 <code>id</code> 属性，才能实现锚点链接的跳转 —— 跳转到 <code>id</code> 所在位置</li> <li>锚点链接的语法是：<code>href=&quot;#id&quot;</code></li></ul> <h4 id="_6-1-3-「锚点链接」课堂练习-05-00"><a href="#_6-1-3-「锚点链接」课堂练习-05-00" class="header-anchor">#</a> 6.1.3 「锚点链接」课堂练习（05'00'')</h4> <ol><li><p>新建 <code>12-锚点标签.html</code>；</p></li> <li><p>复制以下代码到 <code>&lt;body&gt;&lt;/body&gt;</code> 标签中；</p></li> <li><p>给<strong>个人生活</strong>添加锚点链接，测试运行效果，看看会发生什么？如何解决？</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>目录<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>

1. 早年经历<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
2. 演艺经历<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
3. 个人生活<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
4. 主要作品<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>早年经历<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>

刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意[17]
。1973年，刘德华随家人搬入香港蓝田邨第15座14楼[18]<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
刘德华从黄大仙天主教小学毕业后升读可立中学[19]<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路[20]<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>演艺经历<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>

1981年，刘德华考进第10期无线电视艺员训练班[21]
；同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙[22]
；该剧获得美国电视节电视剧特别奖[23] 。<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB[24]
；同年在喜剧《花艇小英雄》中饰演败家仔钱日添；12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注[25]
。<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过[26]
；该剧在香港播出后取得62点的收视纪录；同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将”[27]
。<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
1984年，与赵雅芝合作主演古装武侠剧《魔域桃源》，在剧中饰演资质出众、武功高强的傅青云[28]
；同年，与梁朝伟共同主演金庸武侠剧《鹿鼎记》，在剧中饰演英明果断的康熙[29]
。<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
1985年，在古装武侠剧《杨家将》中饰演饶勇善战的杨六郎[30]
；同年，TVB向刘德华提出加签五年的合约，刘德华因拒绝而被TVB雪藏400天[31-32]。<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
1986年，在邵逸夫的调解下，刘德华与TVB和解并签下合约；同年，主演古装剧《真命天子》。1988年，在出演了武侠剧《天狼劫》后，刘德华将演艺事业的重心转向影坛[32]
。<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>个人生活<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>

刘德华的父亲刘礼在启德机场做过消防员的工作。20世纪60年代，刘礼开了一间小吃杂货店以赚钱维持家用。刘德华在家中还有三位姐姐，一位妹妹以及一位弟弟（刘德盛）[158]
。<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">&gt;</span></span>感情<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>

1986年，刘德华随香港明星足球队赴吉隆坡时，结识了朱丽倩。2008年6月23日，刘德华与朱丽倩在美国拉斯维加斯注册结婚[159]
。2012年5月9日，刘德华的妻子朱丽倩生下一个女儿。[160-161]<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
2016年3月，刘德华的妻子朱丽倩怀上第2胎。[162]<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>如果跳转的目标位置剩余页面空间不足，只会跳转到保证该位置能够在窗口内显示。</p></div> <h3 id="_6-2-「知道」注释标签和特殊字符-08-18"><a href="#_6-2-「知道」注释标签和特殊字符-08-18" class="header-anchor">#</a> 6.2 「知道」注释标签和特殊字符（08'18'）</h3> <h4 id="_6-2-1-「注释标签和特殊字符」内容"><a href="#_6-2-1-「注释标签和特殊字符」内容" class="header-anchor">#</a> 6.2.1 「注释标签和特殊字符」内容</h4> <ul><li>问题 1：VSCode 中注释的快捷键是什么？</li> <li>问题 2：HTML 中的注释有什么用处？我们开发的时候要写注释吗？</li> <li>问题 3：前端工程师一般记住几个特殊符号就可以了？</li></ul> <h4 id="_6-2-2-「注释标签和特殊字符」重点"><a href="#_6-2-2-「注释标签和特殊字符」重点" class="header-anchor">#</a> 6.2.2 「注释标签和特殊字符」重点</h4> <ul><li>注释
<ul><li>注释是给程序员看的，不会显示在页面中</li> <li>在开发页面时，页面内容通常是从上向下顺序排列的，合理第使用注释能够辅助拆分页面结构</li></ul></li> <li>特殊符号
<ul><li>空格 <code>&amp;nbsp;</code>：<code>no break space</code></li> <li>大于号 <code>&amp;gt;</code>：<code>greater than</code></li> <li>小于号 <code>&amp;lt;</code>：<code>less than</code></li></ul></li></ul> <h3 id="_6-3-「应用」综合案例-10-36-5-13"><a href="#_6-3-「应用」综合案例-10-36-5-13" class="header-anchor">#</a> 6.3 「应用」综合案例（10'36' ~ 5'13）</h3> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>综合案例是今晚的作业。</p></div> <h2 id="_7-附录"><a href="#_7-附录" class="header-anchor">#</a> 7. 附录</h2> <h3 id="_7-1-标签"><a href="#_7-1-标签" class="header-anchor">#</a> 7.1 标签</h3> <h4 id="_7-1-1-骨架标签"><a href="#_7-1-1-骨架标签" class="header-anchor">#</a> 7.1.1 骨架标签</h4> <table><thead><tr><th>标签名</th> <th>说明</th></tr></thead> <tbody><tr><td><code>html</code></td> <td>根标签，是页面中最大的标签</td></tr> <tr><td><code>head</code></td> <td>设置页面信息，例如网页标题 <code>title</code> 以及其他告诉浏览器或爬虫的信息</td></tr> <tr><td><code>title</code></td> <td>网页标题，显示在浏览器标签上</td></tr> <tr><td><code>body</code></td> <td>网页文档内容，供用户浏览</td></tr></tbody></table> <h4 id="_7-1-2-常用标签"><a href="#_7-1-2-常用标签" class="header-anchor">#</a> 7.1.2 常用标签</h4> <table><thead><tr><th>序号</th> <th>标签名</th> <th>说明</th></tr></thead> <tbody><tr><td>1</td> <td><code>h1</code> ~ <code>h6</code></td> <td>标题标签，独占一行显示</td></tr> <tr><td>2</td> <td><code>p</code></td> <td>段落，在窗口中自动换行，段落之间有间距</td></tr> <tr><td>3</td> <td><code>br</code></td> <td>换行，直接另起一行，没有明显的间距</td></tr> <tr><td>4</td> <td><code>strong</code> 或 <code>b</code></td> <td>加粗，更推荐 <code>strong</code></td></tr> <tr><td>5</td> <td><code>em</code> 或 <code>i</code></td> <td>倾斜，更推荐 <code>em</code></td></tr> <tr><td>6</td> <td><code>del</code> 或 <code>s</code></td> <td>删除线，更推荐 <code>del</code></td></tr> <tr><td>7</td> <td><code>ins</code> 或 <code>u</code></td> <td>下划线，更推荐 <code>ins</code></td></tr> <tr><td>8</td> <td><code>div</code></td> <td>大盒子，一行一个（现在）</td></tr> <tr><td>9</td> <td><code>span</code></td> <td>小盒子，一行多个</td></tr> <tr><td>10</td> <td><code>img</code></td> <td>图像，必须属性 <code>src</code></td></tr> <tr><td>11</td> <td><code>a</code></td> <td>超链接，重要属性 <code>href</code></td></tr> <tr><td>12</td> <td><code>id</code></td> <td>标识，身份证，通常用来唯一标识某一个元素</td></tr></tbody></table> <h3 id="_7-2-快捷键"><a href="#_7-2-快捷键" class="header-anchor">#</a> 7.2 快捷键</h3> <h4 id="_7-2-1-vscode-快捷键"><a href="#_7-2-1-vscode-快捷键" class="header-anchor">#</a> 7.2.1 VSCode 快捷键</h4> <table><thead><tr><th>快捷键</th> <th>作用</th></tr></thead> <tbody><tr><td>ctrl + n</td> <td>新建文件</td></tr> <tr><td>ctrl + s</td> <td>保存文件</td></tr> <tr><td>ctrl + z</td> <td>撤销</td></tr> <tr><td>ctrl + shift + z</td> <td>恢复撤销</td></tr> <tr><td>ctrl + 加号 / 减号</td> <td>放大 / 缩小</td></tr> <tr><td>ctrl + c / v</td> <td>复制粘贴一行（不能选中文字）</td></tr> <tr><td>ctrl + x</td> <td>删除一行</td></tr> <tr><td>alt + ↑ / ↓</td> <td>上下移动代码</td></tr> <tr><td>alt + shift + ↑ / ↓</td> <td>上下复制一行代码</td></tr> <tr><td>ctrl + /</td> <td>注释</td></tr> <tr><td>alt + z</td> <td>自动换行</td></tr></tbody></table> <h4 id="_7-2-2-chrome-快捷键"><a href="#_7-2-2-chrome-快捷键" class="header-anchor">#</a> 7.2.2 Chrome 快捷键</h4> <table><thead><tr><th>快捷键</th> <th>作用</th></tr></thead> <tbody><tr><td>F5</td> <td>刷新页面</td></tr> <tr><td>F12</td> <td>打开控制台</td></tr> <tr><td>ctrl + 加号 / 减号</td> <td>放大 / 缩小</td></tr></tbody></table> <h3 id="_7-3-单词表"><a href="#_7-3-单词表" class="header-anchor">#</a> 7.3 单词表</h3> <h4 id="_7-3-1-重点单词"><a href="#_7-3-1-重点单词" class="header-anchor">#</a> 7.3.1 重点单词</h4> <table><thead><tr><th>序号</th> <th>英语</th> <th>中文</th></tr></thead> <tbody><tr><td>1</td> <td>web</td> <td>网络</td></tr> <tr><td>2</td> <td>text</td> <td>文本</td></tr> <tr><td>3</td> <td>tag</td> <td>标签</td></tr> <tr><td>4</td> <td>charset</td> <td>字符集</td></tr> <tr><td>5</td> <td>span</td> <td>跨度</td></tr> <tr><td>6</td> <td>image</td> <td>图像</td></tr> <tr><td>7</td> <td>src / source</td> <td>源</td></tr> <tr><td>8</td> <td>alt / alternative</td> <td>供替代的选择</td></tr> <tr><td>9</td> <td>title</td> <td>标题</td></tr> <tr><td>10</td> <td>width</td> <td>宽度</td></tr> <tr><td>11</td> <td>height</td> <td>高度</td></tr> <tr><td>12</td> <td>border</td> <td>边框</td></tr> <tr><td>13</td> <td>ref / reference</td> <td>引用，参考</td></tr> <tr><td>14</td> <td>target</td> <td>目标</td></tr> <tr><td>15</td> <td>blank</td> <td>空白</td></tr> <tr><td>16</td> <td>space</td> <td>空格，空间</td></tr> <tr><td>17</td> <td>greater than</td> <td>大于</td></tr> <tr><td>18</td> <td>less than</td> <td>小于</td></tr></tbody></table> <h4 id="_7-3-4-非重点单词"><a href="#_7-3-4-非重点单词" class="header-anchor">#</a> 7.3.4 非重点单词</h4> <table><thead><tr><th>序号</th> <th>英语</th> <th>中文</th></tr></thead> <tbody><tr><td>1</td> <td>Hyper Text Markup Language</td> <td>超文本标记语言</td></tr> <tr><td>2</td> <td>markup</td> <td>标记</td></tr> <tr><td>3</td> <td>Chrome</td> <td>谷歌浏览器</td></tr> <tr><td>4</td> <td>FireFox</td> <td>火狐浏览器</td></tr> <tr><td>5</td> <td>Safari</td> <td>苹果公司研发的网络浏览器</td></tr> <tr><td>6</td> <td>Opera</td> <td>欧朋浏览器</td></tr> <tr><td>7</td> <td>IE（Internet Explorer）</td> <td>微软公司出品的网页浏览器</td></tr> <tr><td>8</td> <td>W3C</td> <td>万维网联盟</td></tr> <tr><td>9</td> <td>Structure</td> <td>结构</td></tr> <tr><td>10</td> <td>Presentation</td> <td>表现</td></tr> <tr><td>11</td> <td>Behavior</td> <td>行为</td></tr> <tr><td>12</td> <td>paragraph</td> <td>段落</td></tr> <tr><td>13</td> <td>break</td> <td>打断、换行</td></tr> <tr><td>14</td> <td>division</td> <td>分割、分区、除法</td></tr> <tr><td>15</td> <td>anchor</td> <td>锚</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/basenode/html/" class="prev router-link-active">
        HTML 学习
      </a></span> <span class="next"><a href="/basenode/html/day02.html">
        HTML 第 02 天
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/basenode/assets/js/app.52c57e5d.js" defer></script><script src="/basenode/assets/js/2.fd1002bd.js" defer></script><script src="/basenode/assets/js/7.6ab91996.js" defer></script>
  </body>
</html>
